/** General page styling **/
body {
  /* background-color: #fafafa; */
  font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
  background-color:#f7f7f7;
}
	.plan .tab_bg {height:33px; background:url('<?=$dmshop_main_path?>/img/plan_bg.gif') repeat-x;}
	.plan .tab_line {width:1px; background:url('<?=$dmshop_main_path?>/img/plan_line.gif') no-repeat;}
	
	.plan .tab_on {background:url('<?=$dmshop_main_path?>/img/plan_on.gif') repeat-x;}
	.plan .tab_on_right {background:url('<?=$dmshop_main_path?>/img/plan_on_right.gif') no-repeat right 0;}
	.plan .tab_on_text {text-decoration:none; display:block; text-align:center; padding:0 30px; height:33px; font-weight:bold; line-height:33px; font-size:12px; color:#3a3a3a; font-family:gulim,굴림;}
	
	.plan .tab_off {background:url('<?=$dmshop_main_path?>/img/plan_off.gif') repeat-x;}
	.plan .tab_off_text {text-decoration:none; display:block; text-align:center; padding:0 30px; height:33px; line-height:33px; font-size:12px; color:#9e9e9e; font-family:gulim,굴림;}
	
	.plan .layer {display:none;}
	
	.rank .tab_on {background:url('<?=$dmshop_main_path?>/img/rank_on.gif') repeat-x;}
	.rank .tab_on_text {text-decoration:none; display:block; text-align:center; height:23px; line-height:23px; font-size:11px; color:#3a3a3a; font-family:dotum,돋움;}
	
	.rank .tab_off {background:url('<?=$dmshop_main_path?>/img/rank_off.gif') repeat-x;}
	.rank .tab_off_text {text-decoration:none; display:block; text-align:center; height:23px; line-height:23px; font-size:11px; color:#787878; font-family:dotum,돋움;}
	
	.rank .layer {display:none;}
	
	#rank1 a {width:63px;}
	#rank2 a {width:63px;}
	#rank3 a {width:53px;}
	
	.main_sub {height:30px; font-family: '돋움',dotum;}
	.main_sub .title{font-size: 16px; font-weight: bolder; }
	.main_sub .text{font-size:12px;color:#a5a5a5;}
	.category_position .home {line-height:14px; font-size:12px; color:#9e9e9e; font-family:gulim,굴림;}
	.category_position .off {line-height:14px; font-size:12px; color:#555555; font-family:gulim,굴림;}
	.category_position .on {font-weight:bold; line-height:14px; font-size:12px; color:#555555; font-family:gulim,굴림;}
	.category_position .title {line-height:14px; font-size:13px; color:#969696; font-weight:bold; font-family:dotum,돋움;}
	.category_position .input {width:118px; height:17px; border:1px solid #cccccc; padding:1px 3px 0px 3px;}
	.category_position .input {font-weight:bold; line-height:17px; font-size:12px; color:#555555; font-family:gulim,굴림;}
	
	.category_icon .title {line-height:14px; font-size:11px; color:#9e9e9e; font-family:dotum,돋움;}
	.category_icon .checkbox {width:13px; height:13px; position:relative; overflow:hidden; left:0; top:-1px;}
	
	.category_list .line {background:url('./image/common/line.gif') repeat-y;}
	.category_list .off {line-height:14px; font-size:12px; color:#555555; font-family:gulim,굴림;}
	.category_list .on {font-weight:bold; line-height:14px; font-size:12px; color:#555555; font-family:gulim,굴림;}
	
	.category_title .bg1 {width:2px; height:30px; background:url('./image/common/title_bg1.gif') no-repeat;}
	.category_title .bg2 {height:30px; background:url('./image/common/title_bg2.gif') repeat-x;}
	.category_title .bg3 {width:2px; background:url('./image/common/title_bg3.gif') no-repeat;}
	.category_title .count {font-weight:bold; line-height:14px; font-size:11px; color:#555555; font-family:dotum,돋움;}
	.category_title .title {line-height:14px; font-size:11px; color:#9e9e9e; font-family:dotum,돋움;}
	
	.category_item .checkbox {width:13px; height:13px; position:relative; overflow:hidden; left:0; top:0px;}
	.category_item .text {line-height:16px; font-size:11px; color:#787879; font-family:dotum,돋움;}
	
	.star0 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat;}
	.star1 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat 0px -18px;}
	.star2 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat 0px -36px;}
	.star3 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat 0px -54px;}
	.star4 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat 0px -72px;}
	.star5 {width:85px; height:18px; background:transparent url('./image/common/reply_star.png') no-repeat 0px -90px;}
	
	.border_top{
		 border-top: 1px solid #c4c4c4;
	}
	
	.item_border_top{
		 border: 1px solid #c4c4c4;
	     /*
	     border-radius: 7px 7px 0 0 / 7px 7px 0 0;
	    -moz-border-radius: 7px 7px 0 0 / 7px 7px 0 0;
	    */
	    -moz-border-radius-topleft: 7px;
		-webkit-border-radius-top-left: 7px;
		border-top-left-radius: 7px;
	    -moz-border-radius-topright: 7px;
		-webkit-border-radius-top-right: 7px;
		border-top-right-radius: 7px;
	    border-bottom : none;
	    behavior:url('http://sigong.vinemw.com/js/PIE/PIE.htc');
	}
	
	.item_border_side {
	 border-left  : 1px solid #c4c4c4;
	 border-right : 1px solid #c4c4c4;
	 height:78px;
	}
	
	.item_border_bottom{
		 border: 1px solid #c4c4c4;
		 border-top: 1px solid #e4e4e4 ;
	/*     border-radius: 0 0 7px 7px / 0 0 7px 7px;
	    -moz-border-radius: 0 0 7px 7px / 0 0 7px 7px;
	     */
	    -moz-border-radius-bottomleft: 7px;
		-webkit-border-radius-bottom-left: 7px;
		border-bottom-left-radius: 7px;
	    -moz-border-radius-bottomright: 7px;
		-webkit-border-radius-bottom-right: 7px;
		border-bottom-right-radius: 7px;
	    height:29px;
	    background-color:#f6f6f6;
	    font-size :13px;
		color:#555;
		behavior:url('http://sigong.vinemw.com/js/PIE/PIE.htc');
	}
	.bg_thumb {
		background-size: 268px 379px;
		background-repeat: no-repeat;
		height: 379px;
		width: 268px;
		cursor:pointer;
	}
	
	.category_not .not {line-height:14px; font-size:11px; color:#9e9e9e; font-family:dotum,돋움;}
	.category_cart .title {line-height:14px; font-size:11px; color:#9e9e9e; font-family:dotum,돋움;}
	 
	.category_itme_div { width:1160px;  text-align:center; margin-left: -11px;}
	.category_itme_div ul { width:100%; }
	.category_itme_div ul li { 	float:left; width:268px; margin:11px; }
	
	
	#loader {
	    display: none;
	    position: fixed;
	    bottom: 180px;
	    left: 50%;
	    background: transparent url("http://www.holyboon.com/wookmark/assets/loader-circle-image.gif") no-repeat center center;
	    width: 32px;
	    height: 32px;
	    margin-left: -16px;
	}
	
	.list_p {
		padding:15px; 
		text-align: left;
	}
	
	.active {
    display: block;
    background: #585858 !important;
  /*  border: 1px solid #585858; */
    color: #fff;
    margin-top: -1px;
    height: 33px; }

.icon-view{
	background:url(/image/common/icon_hit.png)   no-repeat;
	background-position: 15px center;
    width: 100px;
    height: 43px;
}
.icon-pin{
	background:url(/image/common/icon_pin.png)    no-repeat;
	background-position: 5px center; 
    width: 78px;
    height: 43px;
}
.icon-pin-it{
	background:url(/image/common/icon_pin_it.png)    no-repeat;
	background-position: 5px center; 
    width: 78px;
    height: 43px;
}

header h1 {
  text-align: center;
  font-size: 30px;
  font-weight: 200;
  margin: 30px 0 10px 0;
}

header p {
  text-align: center;
  font-size: 14px;
  color: #666666;
  margin: 0;
  font-weight: 200;
}

a {
  text-decoration: none;
}

.layout_main {
	margin: 0;
	background-color: rgba(0,0,0,0);
}
/**
 * Progress bar for imagesLoaded
 */
.progress-bar {
  background-color: #0BC20B;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  -webkit-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
     -moz-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
          box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
  -webkit-transition: width 0.1s ease-out;
     -moz-transition: width 0.1s ease-out;
       -o-transition: width 0.1s ease-out;
          transition: width 0.1s ease-out;
}

/**
 * Placerholder css
 */
.wookmark-placeholder {
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  background-color: #eee;
  border: 1px solid #dedede;
  z-index: -1;
}

/**
 * Grid container
 */
 
 #container{
 	/* min-height: 665px;  */
 }
 
.tiles-wrap {
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 10px 0;
  padding: 0;
  list-style-type: none;
  display: none;
}


/**
 * Grid items
 */
.tiles-wrap li {
  display: block;
  opacity: 1;
  text-align: center;
  list-style-type: none;
   background-color: #fff; 
  float: left;
  cursor: pointer;
  overflow : hidden;
  /*
  width: 200px;
  border: 1px solid #dedede; 
  
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  */
}
.tiles-wrap.animated li {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.tiles-wrap li.wookmark-inactive {
  visibility: hidden;
  opacity: 0;
}

.tiles-wrap li:hover {
  background-color: #fff;
}

.tiles-wrap img {
  width:100%;
  display: block;
 /*
  -webkit-border-radius: 5px 5px 0px 0px;
     -moz-border-radius: 5px 5px 0px 0px;
          border-radius: 5px 5px 0px 0px;
          */
	transition: all .5s ease 0s ;
	
}

.tiles-wrap a:hover img {
	transform: scale(1.55, 1.55);
	-webkit-filter: grayscale(0%);
  	filter: none;
}


.tiles-wrap a {
  color: #555;
  text-align: center;
  /* display: table-cell; */
  width: 200px;
  height: 200px;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
}

.tile-loading:after {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #ddd;
  content: "Loading\2026";
  padding-top: 20px;
  color: #999;
}

.tiles-wrap .options {
    opacity: 0;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    z-index: 10;
 /*
    background-color: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.35);
   -webkit-border-radius: 5px 5px 0px 0px;
     -moz-border-radius: 5px 5px 0px 0px;
          border-radius: 5px 5px 0px 0px;
   */ 
}

.tiles-wrap .options .cart {
    cursor: pointer;
    float: left;
    top: 0px;
    width: 50%;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 44px;
    text-align: center;
    color: #000 !important;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    font-weight: bold;
    padding: 0;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.tiles-wrap .options .like {
    cursor: pointer;
    float: left;
    top: 0px;
    width: 50%;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 44px;
    text-align: center;
    color: #000 !important;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    font-weight: bold;
    padding: 0;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.tiles-wrap a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: all .3s ease .1s;
    background-color: rgba(255,255,255,.4);
    opacity: 0;
}
.tiles-wrap li:hover a:after {
	opacity: 1;	
}



.tiles-wrap li .desc h5, .tiles-wrap li .desc p
{
	transition: all .3s ease .2s;
	opacity: 0;
}

.tiles-wrap li .desc h5 {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif !important;
	transform: translateY(60%);
    margin-bottom: 0px !important; 
}

.tiles-wrap li .desc p {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif !important;
	transform: translateY(-60%);
}

.tiles-wrap li:hover h5, .tiles-wrap li:hover p
{
	opacity: 1;
	transform: translateY(0) 
}


.tiles-wrap li .desc {
	position: absolute;
	top: 70%;
	left: 60%;
	text-align: left ;
	width:100%;
	transform: translate(-50%, -50%);
	z-index: 2
}

.tiles-wrap li .desc h5 {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	word-spacing: 3px;
	color: #000;
}

.tiles-wrap li .desc p {
	text-transform: capitalize;
	font-size: 12px;
	color: #000;
	font-weight: 500
}



/**
 * Filters
 */
#filters {
  list-style-type: none;
  text-align: center;
  margin: 0 5% 0 5%;
}

#filters:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#filters li {
  font-size: 12px;
  float: left;
  padding: 6px 8px 4px;
  cursor: pointer;
  margin: 0 10px;
  -webkit-transition: all 0.15s ease-out;
     -moz-transition: all 0.15s ease-out;
       -o-transition: all 0.15s ease-out;
          transition: all 0.15s ease-out;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

#filters li:hover {
  background: #4281f5;
  color: #ffffff;
}

#filters li.active {
  background: #4281f5;
  color: #ffffff;
}